<template>
    <div>
        <label v-if="lable">{{lable}}</label>
        <slot></slot>
        <p v-if="validateStatus" :class="{validateStatus:error}">{{errorMessage}}</p>
    </div>
</template>

<script>
    import KInput from './Input'
    import schema from 'async-validator'
    export default {
        inject:["form"],
        props:['lable','prop'],
        data(){
            return {
                validateStatus:false,
                errorMessage:""
            }
        },
        components:[
            KInput
        ],
        created(){
            this.$on("validate", this.validate);
        },
        mounted(){
            if(this.prop){
                this.$parent.$emit("formItemAdd",this);
            }
        },
        methods:{
            validate(){
                //验证当前项 依赖 async-validator
                var desc={
                    [this.prop]:[this.form.rules[this.prop]]
                }
                const validator = new schema(desc);
                console.log("校验fromitem：",desc);
                validator.validate({[this.prop]: this.form.model[this.prop]},errors =>{
                    console.log(errors);
                    if(errors){
                        this.validateState = true;
                        this.errorMessage = errors[0].message;
                        console.log("校验成功111");
                    }else{

                        console.log("校验失败111");
                    }
                })

            }
        }
    }
</script>

<style scoped>
    .error{
        color: #f00;
    }

</style>